<template>
  <div class="cart_index">
    <!-- 头 -->
    <header-nav></header-nav>

    <!-- 身体 -->
    <div class="card_body">
      <div class="container">
        <!-- logo页面以及搜索栏 -->
        <div class="top">
          <div class="logo">
            <router-link to="/">
              <img src="../assets/img/logo1.jpg" />
              <img src="../assets/img/nvidia.png" />
            </router-link>
          </div>
          <div class="search">
            <input />
            <div class="text">搜索</div>
          </div>
        </div>

        <!-- 购物车表格 -->
        <div class="shopping">
          <!-- 配送地址 -->
          <div class="card-top">
            <div class="left">全部商品</div>
            <div class="right">
              <!-- 地址 -->
            </div>
          </div>
          <!-- 商品表格 -->
          <card></card>
        </div>
      </div>
    </div>

    <!-- 页脚 -->
    <div class="footer">
      <div class="container">
        <div class="top">
          <ul>
            <li>品种齐全，购物轻松</li>
            <li>多仓直发，极速配送</li>
            <li>正品行货，精致服务</li>
            <li>天天低价，畅选无忧</li>
          </ul>
        </div>
        <!-- 中间 -->
        <div class="center" v-if="data">
          <ul v-for="(p, i) in data" :key="i">
            <li>{{ p.a }}</li>
            <li><p></p></li>
            <li>{{ p.b }}</li>
            <li>{{ p.c }}</li>
            <li>{{ p.d }}</li>
            <li>{{ p.e }}</li>
            <li>{{ p.f }}</li>
            <li>{{ p.g }}</li>
          </ul>
        </div>
        <!-- last -->
        <div class="last">
          <div class="pas-fotter_center">
            <div class="center-container">
              <dir class="iconfont icon-tubiaoxinfengyoujian"></dir>
              <div class="text">
                <span>订阅最新消息</span>
              </div>
              <div class="button">
                <el-button>订阅</el-button>
              </div>
            </div>
          </div>
          <div class="page-fotter_bottom">
            <div class="text">关注 NVIDIA</div>
            <a href="">
              <span class="iconfont icon-tubiaoweibo"></span>
            </a>
            <a href="">
              <span class="iconfont icon-tubiaoweixin"></span>
            </a>
            <a href="">
              <span class="iconfont icon-tubiaodouyin"></span>
            </a>
            <a href="">
              <span class="iconfont icon-tubiaoyouku"></span>
            </a>
          </div>
        </div>
      </div>
      <!-- 下边 -->
      <div class="bottom">
        <div class="contanier">
          <div class="lin1">
            <div class="logo">
              <div class="iconfont icon-tubiaonvidia"></div>
              <img src="../assets/img/nvidia.png" alt="" />
            </div>
            <div class="china">CHN-中国</div>
          </div>
          <ul class="lin2">
            <li><a href="">隐私声明</a></li>
            <li><a href="">法律事宜</a></li>
            <li><a href="">联系我们</a></li>
          </ul>
          <div class="lin3">
            <div class="text">Copyright © 2022 NVIDIA Corporation</div>
            <a href="">京ICP备18033986号-1</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue";
import Card from "@/components/card.vue";
export default {
  components: { HeaderNav, Card },
  data() {
    return {
      data: [
        {
          title: "购物指南",
          a: "购物流程",
          b: "会员介绍",
          c: "生活旅行",
          d: "常见问题",
          e: "大家电",
          f: "联系客服",
        },
        {
          title: "配送方式",
          a: "上门自提",
          b: "211限时达",
          c: "配送服务查询",
          d: "配送费收取标准",
          e: "海外配送",
          f: "",
        },
        {
          title: "支付方式",
          a: "货到付款",
          b: "在线支付",
          c: "分期付款",
          d: "公司转账",
          e: "",
          f: "",
        },
        {
          title: "售后服务",
          a: "售后政策",
          b: "价格保护",
          c: "退款说明",
          d: "返修说明",
          e: "返修/退换货",
          f: "取消订单",
        },
        {
          title: "特色服务",
          a: "夺宝岛",
          b: "DIY装机",
          c: "延保服务",
          d: "",
          e: "",
          f: "",
        },
      ],
      commoditDate: [
        {
          commodit: "弘基500SE",
          price: "12969.00",
          number: "1",
        },
      ],
    };
  },
  methods: {},
};
</script>


<style scoped src="../assets/css/cartIndex.css">
</style>
<style lang="scss" scoped>
.pas-fotter_center {
  width: 525px !important;

  .center-container {
    display: flex;
    justify-content: start;
    align-items: center;

    .iconfont {
      font-size: 50px;
    }
    .text {
      color: #fff;
      font-size: 21px;
      margin-left: 30px;
    }
    .button {
      margin-left: 30px;
      .el-button {
        border-radius: 0;
        color: #fff;
        background-color: #76b900;
        border: 0;
      }
    }
  }
}
</style>